<template>
    <div :class="{ 'light-theme': !systemStore.sysTheme }">
        <n-config-provider
            :locale="zhCN"
            :date-locale="dateZhCN"
            :theme="systemStore.sysTheme ? darkTheme : null"
            :theme-overrides="
                systemStore.sysTheme ? darkThemeColor : lightThemeColor
            "
        >
            <n-global-style />
            <n-dialog-provider>
                <n-message-provider>
                    <n-notification-provider>
                        <n-loading-bar-provider>
                            <App />
                        </n-loading-bar-provider>
                    </n-notification-provider>
                </n-message-provider>
            </n-dialog-provider>
        </n-config-provider>
    </div>
</template>
<script setup>
import { darkTheme } from "naive-ui";
import { zhCN, dateZhCN } from "naive-ui";
import App from "@/App.vue";
import { useSystemStore } from "@/store/system";

import {
    lightThemeColor,
    darkThemeColor,
    darkStyle,
    lightStyle,
} from "./theme";
import { watch } from "vue";

const systemStore = useSystemStore();

watch(
    () => systemStore.sysTheme,
    (newVal) => {
        let html = document.getElementById("htmlRoot");
        let style = lightStyle;
        if (newVal) style = darkStyle;
        for (let key in style) {
            html.style.setProperty(key, style[key]);
        }
    },
    {
        deep: true,
        immediate: true,
    }
);
</script>
